"use client"

import React from "react"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Slider } from "@/components/ui/slider"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { 
  Pencil, 
  Eraser, 
  PaintBucket, 
  Type, 
  MousePointer, 
  Square, 
  Circle, 
  Minus,
  Undo,
  Redo,
  Save,
  FolderOpen
} from "lucide-react"
import { cn } from "@/lib/utils"

type Tool = "pencil" | "eraser" | "fill" | "text" | "select" | "shape"
type ShapeType = "rectangle" | "circle" | "line" | "none"

interface ToolbarProps {
  activeTool: Tool
  setActiveTool: (tool: Tool) => void
  activeColor: string
  setActiveColor: (color: string) => void
  brushSize: number
  setBrushSize: (size: number) => void
  activeShape: ShapeType
  setActiveShape: (shape: ShapeType) => void
  onUndo: () => void
  onRedo: () => void
  onSave: () => void
  onOpen: () => void
  className?: string
}

const colorOptions = [
  "#000000", // Black
  "#FFFFFF", // White
  "#FF0000", // Red
  "#00FF00", // Green
  "#0000FF", // Blue
  "#FFFF00", // Yellow
  "#FF00FF", // Magenta
  "#00FFFF", // Cyan
  "#FFA500", // Orange
  "#800080", // Purple
  "#A52A2A", // Brown
  "#808080", // Gray
]

export function Toolbar({
  activeTool,
  setActiveTool,
  activeColor,
  setActiveColor,
  brushSize,
  setBrushSize,
  activeShape,
  setActiveShape,
  onUndo,
  onRedo,
  onSave,
  onOpen,
  className,
}: ToolbarProps) {
  return (
    <div className={cn("flex flex-col bg-paint-toolbar border-b border-paint-border p-2", className)}>
      {/* Top toolbar with file operations */}
      <div className="flex items-center space-x-2 mb-2">
        <Button 
          variant="ghost" 
          size="sm" 
          className="text-xs"
          onClick={onOpen}
        >
          <FolderOpen className="h-4 w-4 mr-1" />
          Open
        </Button>
        <Button 
          variant="ghost" 
          size="sm" 
          className="text-xs"
          onClick={onSave}
        >
          <Save className="h-4 w-4 mr-1" />
          Save
        </Button>
        <Separator orientation="vertical" className="h-6" />
        <Button 
          variant="ghost" 
          size="sm" 
          className="text-xs"
          onClick={onUndo}
        >
          <Undo className="h-4 w-4 mr-1" />
          Undo
        </Button>
        <Button 
          variant="ghost" 
          size="sm" 
          className="text-xs"
          onClick={onRedo}
        >
          <Redo className="h-4 w-4 mr-1" />
          Redo
        </Button>
      </div>
      
      {/* Main toolbar with drawing tools */}
      <div className="flex items-start space-x-4">
        {/* Drawing tools */}
        <div className="flex flex-col space-y-2">
          <Button
            variant={activeTool === "pencil" ? "secondary" : "ghost"}
            size="icon"
            onClick={() => setActiveTool("pencil")}
            title="Pencil"
          >
            <Pencil className="h-4 w-4" />
          </Button>
          <Button
            variant={activeTool === "eraser" ? "secondary" : "ghost"}
            size="icon"
            onClick={() => setActiveTool("eraser")}
            title="Eraser"
          >
            <Eraser className="h-4 w-4" />
          </Button>
          <Button
            variant={activeTool === "fill" ? "secondary" : "ghost"}
            size="icon"
            onClick={() => setActiveTool("fill")}
            title="Fill"
          >
            <PaintBucket className="h-4 w-4" />
          </Button>
          <Button
            variant={activeTool === "text" ? "secondary" : "ghost"}
            size="icon"
            onClick={() => setActiveTool("text")}
            title="Text"
          >
            <Type className="h-4 w-4" />
          </Button>
          <Button
            variant={activeTool === "select" ? "secondary" : "ghost"}
            size="icon"
            onClick={() => setActiveTool("select")}
            title="Select"
          >
            <MousePointer className="h-4 w-4" />
          </Button>
        </div>
        
        <Separator orientation="vertical" className="h-32" />
        
        {/* Shapes */}
        <div className="flex flex-col space-y-2">
          <Button
            variant={activeTool === "shape" && activeShape === "rectangle" ? "secondary" : "ghost"}
            size="icon"
            onClick={() => {
              setActiveTool("shape")
              setActiveShape("rectangle")
            }}
            title="Rectangle"
          >
            <Square className="h-4 w-4" />
          </Button>
          <Button
            variant={activeTool === "shape" && activeShape === "circle" ? "secondary" : "ghost"}
            size="icon"
            onClick={() => {
              setActiveTool("shape")
              setActiveShape("circle")
            }}
            title="Circle"
          >
            <Circle className="h-4 w-4" />
          </Button>
          <Button
            variant={activeTool === "shape" && activeShape === "line" ? "secondary" : "ghost"}
            size="icon"
            onClick={() => {
              setActiveTool("shape")
              setActiveShape("line")
            }}
            title="Line"
          >
            <Minus className="h-4 w-4" />
          </Button>
        </div>
        
        <Separator orientation="vertical" className="h-32" />
        
        {/* Colors */}
        <div className="grid grid-cols-4 gap-1">
          {colorOptions.map((color) => (
            <button
              key={color}
              className={cn(
                "w-6 h-6 rounded border border-gray-300",
                activeColor === color && "ring-2 ring-primary ring-offset-2"
              )}
              style={{ backgroundColor: color }}
              onClick={() => setActiveColor(color)}
              title={color}
            />
          ))}
        </div>
        
        <Separator orientation="vertical" className="h-32" />
        
        {/* Brush size */}
        <div className="flex flex-col space-y-2 min-w-[100px]">
          <span className="text-xs font-medium">Brush Size: {brushSize}px</span>
          <Slider
            value={[brushSize]}
            min={1}
            max={50}
            step={1}
            onValueChange={(value) => setBrushSize(value[0])}
            className="w-full"
          />
          <div className="flex justify-between mt-1">
            <div className="w-2 h-2 bg-foreground rounded-full" />
            <div className="w-4 h-4 bg-foreground rounded-full" />
            <div className="w-6 h-6 bg-foreground rounded-full" />
          </div>
        </div>
      </div>
    </div>
  )
}